/*
 * @Author: 飞越疯人院 353362604@qq.com
 * @Date: 2022-11-04 11:04:34
 * @LastEditors: 飞越疯人院 353362604@qq.com
 * @LastEditTime: 2022-11-14 13:53:39
 * @FilePath: \adminstration\src\Common\Scenes\Mars3d\control.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import { Button, Tabs } from 'antd'
import { CommonTopTitle, Mars3DOptionsModular } from './Modular'
import {
    SceneBasicsSetUpOne,
    SceneBasicsSetUpTwo,
    SceneBasicsSetUpThr,
    SceneControlSetUpOne,
    SceneControlSetUpTwo,
    SceneControlSetUpThr,
    WeatherAttribute,
    LayerGeoJsonOne,
    DifferentJsonData,
} from './Data'

// TODO 场景 scene
// *** 基础设置 SceneBasicsSetUp
export const SceneBasicsSetUp = ({ Scene, SceneEvent }) => {
    const TablesOne = () => (
        <div className="SceneBasicsSetUpSelect">
            {Object.keys(SceneBasicsSetUpOne).map(key => (
                <div key={key}>
                    <div>{SceneBasicsSetUpOne[key].label} : </div>
                    <div>
                        {(() => {
                            const Template = Mars3DOptionsModular[SceneBasicsSetUpOne[key].type]
                            return (
                                <Template
                                    options={SceneBasicsSetUpOne[key].options}
                                    label={key}
                                    value={Scene[key]}
                                    OptionsEvent={SceneEvent}
                                    range={SceneBasicsSetUpOne[key].range}
                                />
                            )
                        })()}
                    </div>
                </div>
            ))}
        </div>
    )

    const TablesTwo = () => (
        <div className="SceneBasicsSetUpSelect">
            {Object.keys(SceneBasicsSetUpTwo).map(key => (
                <div key={key}>
                    <div>{SceneBasicsSetUpTwo[key].label} : </div>
                    <div>
                        {(() => {
                            const Template = Mars3DOptionsModular[SceneBasicsSetUpTwo[key].type]
                            return (
                                <Template
                                    options={SceneBasicsSetUpTwo[key].options}
                                    label={key}
                                    value={Scene[key]}
                                    OptionsEvent={SceneEvent}
                                    range={SceneBasicsSetUpTwo[key].range}
                                    mode={SceneBasicsSetUpTwo[key].mode}
                                />
                            )
                        })()}
                    </div>
                </div>
            ))}
        </div>
    )

    const TablesThr = () => (
        <div className="SceneBasicsSetUpSelect">
            {Object.keys(SceneBasicsSetUpThr).map(key => (
                <div key={key}>
                    <div>{SceneBasicsSetUpThr[key].label} : </div>
                    <div>
                        {(() => {
                            const Template = Mars3DOptionsModular[SceneBasicsSetUpThr[key].type]
                            return (
                                <Template
                                    options={SceneBasicsSetUpThr[key].options}
                                    label={key}
                                    value={Scene[key]}
                                    OptionsEvent={SceneEvent}
                                    range={SceneBasicsSetUpThr[key].range}
                                />
                            )
                        })()}
                    </div>
                </div>
            ))}
        </div>
    )

    return (
        <div className="TwoNAVBox SceneBasicsSetUp">
            <CommonTopTitle title="基础设置" />
            <Tabs
                defaultActiveKey="1"
                centered={true}
                items={[
                    { label: `基础场景`, key: '1', children: <TablesOne /> },
                    { label: `地球设置`, key: '2', children: <TablesTwo /> },
                    { label: `鼠标交互`, key: '3', children: <TablesThr /> },
                ]}
            />
        </div>
    )
}
// *** 控件设置 SceneControlSetUp
export const SceneControlSetUp = ({ Scene, SceneEvent }) => {
    return (
        <div className="TwoNAVBox SceneControlSetUp">
            <CommonTopTitle title="控件设置" />
            <div className="SceneControlSetUpOne">
                <div>
                    <div>系统按钮 : </div>
                    <div>
                        {Object.keys(SceneControlSetUpOne).map(key => (
                            <div key={key}>
                                <div>{SceneControlSetUpOne[key].label} : </div>
                                <div>
                                    {(() => {
                                        const Template = Mars3DOptionsModular[SceneControlSetUpOne[key].type]
                                        return (
                                            <Template
                                                options={SceneControlSetUpOne[key].options}
                                                label={key}
                                                value={Scene[key]}
                                                OptionsEvent={SceneEvent}
                                                range={SceneControlSetUpOne[key].range}
                                                mode={SceneControlSetUpOne[key].mode}
                                            />
                                        )
                                    })()}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
                <div>
                    <div>自定义按钮 : </div>
                    <div>
                        {Object.keys(SceneControlSetUpTwo).map(key => (
                            <div key={key}>
                                <div>{SceneControlSetUpTwo[key].label} : </div>
                                <div>
                                    {(() => {
                                        const Template = Mars3DOptionsModular[SceneControlSetUpTwo[key].type]
                                        return (
                                            <Template
                                                options={SceneControlSetUpTwo[key].options}
                                                label={key}
                                                value={Scene[key]}
                                                OptionsEvent={SceneEvent}
                                                range={SceneControlSetUpTwo[key].range}
                                                mode={SceneControlSetUpTwo[key].mode}
                                            />
                                        )
                                    })()}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
                <div>
                    <div>面板 : </div>
                    <div>
                        {Object.keys(SceneControlSetUpThr).map(key => (
                            <div key={key}>
                                <div>{SceneControlSetUpThr[key].label} : </div>
                                <div>
                                    {(() => {
                                        const Template = Mars3DOptionsModular[SceneControlSetUpThr[key].type]
                                        return (
                                            <Template
                                                options={SceneControlSetUpThr[key].options}
                                                label={key}
                                                value={Scene[key]}
                                                OptionsEvent={SceneEvent}
                                                range={SceneControlSetUpThr[key].range}
                                                mode={SceneControlSetUpThr[key].mode}
                                            />
                                        )
                                    })()}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    )
}
// *** 天气特效 SceneWeatherSetUp
export const SceneWeatherSetUp = ({ Scene, SceneEvent }) => {
    return (
        <div className="TwoNAVBox SceneWeatherSetUp">
            <CommonTopTitle title="天气特效" />
            <div className="SceneBasicsSetUpSelect">
                {Object.keys(WeatherAttribute).map(key => (
                    <div key={key}>
                        <div>{WeatherAttribute[key].label} : </div>
                        <div>
                            {(() => {
                                const Template = Mars3DOptionsModular[WeatherAttribute[key].type]
                                return (
                                    <Template
                                        label={key}
                                        value={Scene[key]}
                                        OptionsEvent={SceneEvent}
                                        range={WeatherAttribute[key].range}
                                        step={WeatherAttribute[key].step}
                                    />
                                )
                            })()}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}
// *** 引入数据 SceneIntroduce
export const SceneIntroduce = ({ Scene, SceneEvent }) => {
    return (
        <div className="TwoNAVBox SceneIntroduce">
            <CommonTopTitle title="临时保存" />
            <Button onClick={() => SceneEvent.emit({ submitScene: true })}>临时保存按钮</Button>
        </div>
    )
}

// TODO 图层 layer
// *** LayerGeoJson GeoJson
export const LayerGeoJson = ({ Layer, LayerEvent }) => {
    const TablesOne = () => (
        <div className="SceneBasicsSetUpSelect">
            {Object.keys(LayerGeoJsonOne).map(key => (
                <div key={key}>
                    <div>{LayerGeoJsonOne[key].label} : </div>
                    <div>
                        {(() => {
                            const Template = Mars3DOptionsModular[LayerGeoJsonOne[key].type]
                            return (
                                <Template
                                    options={LayerGeoJsonOne[key].options}
                                    label={key}
                                    value={Layer[key]}
                                    OptionsEvent={LayerEvent}
                                    range={LayerGeoJsonOne[key].range}
                                />
                            )
                        })()}
                    </div>
                </div>
            ))}
        </div>
    )

    const TablesTwo = () => {
        return (
            <div className="SceneBasicsSetUpSelect">
                {Object.keys(DifferentJsonData).map(key => (
                    <div key={key}>
                        <div>{DifferentJsonData[key].label} : </div>
                        <div>
                            {(() => {
                                const Template = Mars3DOptionsModular[DifferentJsonData[key].type]
                                return (
                                    <Template
                                        options={DifferentJsonData[key].options}
                                        label={key}
                                        value={Layer[key]}
                                        OptionsEvent={LayerEvent}
                                        range={DifferentJsonData[key].range}
                                        mode={DifferentJsonData[key].mode}
                                    />
                                )
                            })()}
                        </div>
                    </div>
                ))}
            </div>
        )
    }

    const TablesThr = () => {
        return <Button>保存</Button>
    }

    return (
        <div className="TwoNAVBox LayerGeoJson">
            <CommonTopTitle title="GeoJson" />

            <Tabs
                defaultActiveKey="1"
                centered={true}
                items={[
                    { label: `省市边界`, key: '1', children: <TablesOne /> },
                    { label: `独立图层`, key: '2', children: <TablesTwo /> },
                    { label: `临时保存`, key: '3', children: <TablesThr /> },
                ]}
            />
        </div>
    )
}

// *** LayerKml kml
export const LayerKml = () => {
    return (
        <div className="TwoNAVBox LayerKml">
            <CommonTopTitle title="KML" />
        </div>
    )
}

// *** LayerGLTF
export const LayerGLTF = () => {
    return (
        <div className="TwoNAVBox LayerGLTF">
            <CommonTopTitle title="gLTF小模型" />
        </div>
    )
}

// *** Layer3DTiles
export const Layer3DTiles = () => {
    return (
        <div className="TwoNAVBox Layer3DTiles">
            <CommonTopTitle title="3DTiles三维模型" />
        </div>
    )
}

// *** LayerElement
export const LayerElement = () => {
    return (
        <div className="TwoNAVBox LayerElement">
            <CommonTopTitle title="矢量图层" />
        </div>
    )
}
